﻿<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
   <script src="event.js"></script>
   <script src="dragUtil.js"></script>

<style type="text/css">
  #box {background:white;position: relative; border:1px solid #AAA; width:80px; height:80px; margin:0 0px;z-index:10;  }
  #main {  overflow:auto;position: relative; background:gray; border:1px solid #AAA; width:400px; height:400px; margin:0 0px; float:left; }
   --body {margin:0px 0px;}
  div.colored { background:green; }
  .selected {background:gray;}
  .console { display:block; border:1px solid #AAA; width:300px; height:100%; margin:0 100px;  float:left; }
  input  {width:100px}
  .over { boder:1px dot blue}
  .dragLine {background:yellow;float:right;border:1px solid gray;margin:0px 2px; }
  .bar {position:absolute;border:1px solid red;z-index:10;margin:0px 0px;width:0px;}

  .unselectable {
   -moz-user-select: -moz-none;
   -khtml-user-select: none;
   -webkit-user-select: none;
   /*
     Introduced in IE 10.
     See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
   */
   -ms-user-select: none;
   user-select: none;
}
  </style>
<script type="text/javascript">

var beforeStart = function(event)
{
    console.log('beforeStart off'+ this.drag.getTdE().offsetLeft  + ': ' +this.drag.getTdE().offsetTop  );
    console.log('beforeStart cliet'+  ': ' +this.drag.getTdE().clientTop  );
    this.style.cursor ='e-resize';
    var start =document.getElementById('startLine' );
   start.style.display='block';
   start.style.height =this.drag.getTdE().offsetHeight+'px';
   start.style.left=NodeUtil.pageX(this.drag.getTdE()) + 'px';
   start.style.Top=NodeUtil.pageY(this.drag.getTdE()) + 'px';
   //start.style.left=(this.drag.getTdE().offsetLeft  +
   //                    (document.documentElement.scrollLeft ||  document.body.scrollLeft))+ 'px';
   //start.style.top=(this.drag.getTdE().offsetTop   ) +'px';

   this.drag.getTdE().style.background='yellow';


//    console.log("beforeStart 1  " + this.drag.getTdE().clientHeight + "  " + this.drag.getTdE().client );
//    console.log("beforeStart 2  " + this.drag.getTdE().width + "  " + this.drag.getTdE().style.clientHeight);
//    var end   =document.getElementById('endLine');
//   end.style.display='block';
}

var beforeEnd = function(event)
{
    console.log('beforeEnd');
    var start =document.getElementById('startLine');
    start.style.display='none';
}

var beforeDrag = function(event)
{
    //var w =parseInt( this.drag.getTdE().style.width);
    var w  = this.drag.lastWidth;

    var moveX = event.clientX -this.drag.startX ;
    w=w+moveX;
    //console.log('beforeDrag==>  ' +this.drag.getTdE().clientWidth +'  moveX'+  moveX + ' w ' + w   );
    //console.log('beforeDrag==>event.clientX  ' +event.clientX +'  this.drag.startX'+  this.drag.startX);

    // table resize의 min 값을 설정한다.
    var minpx = parseInt(this.drag.getTableE().getAttribute('minWidth'));
    if ( minpx >w) return ;
    this.drag.getTdE().style.width= (this.drag.tdlastWidth+moveX) + 'px';
    this.drag.getTableE().style.width= w + 'px';


    //this.drag.startX = event.clientX;
    //this.drag.startY = event.clientY;

}


addEvent(window, 'load',function ()
        {
    window.console = window.console || { log:function () {}};

	var nodes =document.getElementsByTagName("span");
	console.log(nodes.length);

	//td의 높이 만큼 선을 조절한다.
	nodeTr = NodeUtil.getParentTagElem(nodes[0],'TD');
	console.log('nodeTr'  + nodeTr);
	var height =20;
	if (nodeTr )
	{
	    console.log('nodeTr.clientHeight ' + nodeTr.clientHeight);
	    height = nodeTr.clientHeight;
	}

	for (var i =0; i < nodes.length ;i++)
	    {
				if (nodes[i].getAttribute("ref")=== 'drag')
				{

				    // 각 node 별로 drag object를 생성한다.
				    var d = new Drag(nodes[i],'');
  
				    nodes[i].drag = d;
				    nodes[i].beforeStart =beforeStart;
                    nodes[i].beforeOver = function (event) {
                        this.style.cursor ='e-resize'; // 좌우 화살표 'default';
                    };

                    nodes[i].beforeEnd = beforeEnd;
                    nodes[i].beforeDrag= beforeDrag;


					console.log(i+ "  " +nodes[i].getAttribute("class")  );
					var value = nodes[i].getAttribute("class");

					value = value +" "+ "bold";
					nodes[i].setAttribute("class" ,value);
					nodes[i].style.height=height+"px"; //TD의 높이를 구한다.
					console.log(i+ "  " +nodes[i].getAttribute("class")  );
				}
	    }

});









</script>

<style>
.tbl {
    table-layout:fixed;
    border-collapse: collapse;
    background: #fff;
 }

.tbl td {
    text-overflow:ellipsis;
    overflow:hidden;
    white-space:nowrap;
}
</style>

</head>
<body>

<div id='endLine' style='display:none;' class='bar'></div>
<div id='startLine' style='display:none;' class='bar'></div>

<table class='tbl' border="1" width=550px minWidth=550px STYLE="table-layout:fixed">
  <tr><td align='center' width=150px>TD #0<span ref='drag' class='dragLine unselectable' noselect></span></td>
      <!--  <td align='center'>TD #1<span  ref='drag' class='dragLine' noselect></span></td>-->
      <td align='center' width=300px colspan='2'>TD #2<span ref='drag'  class='dragLine unselectable' noselect></span></td>
      <td align='center' width=100px >TD #0<span ref='drag' class='dragLine unselectable' noselect></span>
  </tr>
  <!-- <span style='font-size:18px;width:10px;border:1px solid blue'>가나다라마</b></span> -->
  <tr><td>TD #1</td>
  <td style="overflow:hidden;" width="130px">가나다라마가나다라마 33333</td>
  <td>TD #5</td><td>TD #5</td></tr>
  <tr><td>TD #3</td><td>TD #4</td><td>TD #5</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td>TD #7</td><td>TD #8</td><td>TD #5</td></tr>
  <tr><td>TD #6</td><td colspan=2>TD #7</td><td>TD #5</td></tr>
</table>


<li>Credits to http://www.blakems.com/archives/000077.html
<table class='tbl' style=" width:100px;" border=1>
 <tr>
   <td style="width:50px;">가나다라마바사아차가타</td>
   <td>
     test
   </td>
 </tr>
</table>

<button id="run">Run</button>

</body>
</html>